<template>
  <div>我是a1</div>
  <input type="text" v-model="keyword" />
  <div>{{ keyword }}</div>
</template>

<script>
import { ref, customRef } from "vue";
export default {
  name: "a1",
  setup(props, context) {
    // 自定义一个ref函数
    function myRef(value) {
      console.log("--myRef--");
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            // 告诉vue追踪value的改变
            track();
            return value;
          },
          set(newVal) {
            console.log(newVal);
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newVal;
              // 通知vue重新解析模板
              trigger();
            },500);
          },
        };
      });
    }
    let keyword = myRef("helloworld");
    return { keyword };
  },
};
</script>

<style>
</style>